<!--  -->
<template>
  <a-drawer
    :title="title"
    placement="right"
    closable
    :width="1000"
    :visible="visible"
    @close="close"
    :bodyStyle="{ padding: '50px' }"
  >
    <!-- 查询 -->
    <div>
      <a-form>
        <a-row :gutter="queryGutter">
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="权限名称"
                allowClear
                v-model="queryParam.permissionName"
              />
            </a-form-item>
          </a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <a-input
                placeholder="权限编码"
                allowClear
                v-model="queryParam.permissionCode" /></a-form-item
          ></a-col>
          <a-col
            :xs="querySpan.xs"
            :sm="querySpan.sm"
            :md="querySpan.md"
            :lg="querySpan.lg"
            :xl="querySpan.xl"
            :xxl="querySpan.xxl"
          >
            <a-form-item label="" :colon="false">
              <aSelectTorF
                placeholder="状态正常"
                v-model="queryParam.useStatus"
                allowClear
              >
              </aSelectTorF> </a-form-item
          ></a-col>
        </a-row>
        <a-row>
          <div class="search-button">
            <a-button
              type="primary"
              icon="search"
              class="ml10"
              @click="getDataList(true)"
            >
              查询
            </a-button>
            <a-button class="ml10" type="primary" @click="reset">重置</a-button>
          </div>
        </a-row>
      </a-form>
    </div>

    <!-- 表格数据 -->
    <div class="">
      <titleLine title="查询结果" :isBgColor="false"
        ><a-button
          class="ml10"
          type="primary"
          @click="add"
          slot="button"
          icon="plus"
          >添加权限</a-button
        ></titleLine
      >
      <a-table
        :columns="columns"
        :data-source="dataSource"
        class="mt10"
        :pagination="false"
        :scroll="{ x: 500, y: 300 }"
        :loading="tableLoading"
        rowKey="id"
      >
        <template slot="useStatus" slot-scope="text, record">
          <a-tag color="blue" v-if="record.useStatus === 0">启用</a-tag>
          <a-tag v-if="record.useStatus === 1">禁用</a-tag>
        </template>
        <span slot="action" slot-scope="record">
          <a class="" @click="edit(record)">编辑</a>
          <a-popconfirm
            title="确认删除吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="del(record)"
          >
            <aLinkPermission
              labelName="删除"
              buttonCode="permission_delete"
            ></aLinkPermission>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- 数据操作组件 -->
    <DrawerModal @handleOk="handleOk" ref="DrawerModal"></DrawerModal>
  </a-drawer>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Mixins } from "@/mixins/list";
import DrawerModal from "../DrawerModal";
import { columns } from "./save";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Drawer",
  props: {},
  mixins: [Mixins],
  //import引入的组件需要注入到对象中才能使用
  components: { DrawerModal },
  data() {
    //这里存放数据
    return {
      api: {
        listPermissionById: "/admin_server/auth/permission/listPermissionById",
        delete: "/admin_server/auth/permission/delete",
      },
      tableLoading: false,
      columns,
      visible: false,
      title: undefined,
      id: undefined,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 删除
     */
    del(record) {
      this.$request
        .getRequest1(this.api.delete, { id: record.id })
        .then((res) => {
          if (res.success) {
            this.$message.success("删除成功");
            this.getDataList();
          }
        });
    },
    edit(record) {
      this.$refs.DrawerModal.init(record.id, record.pid, "权限修改");
    },
    add() {
      this.$refs.DrawerModal.init(null, this.id, "添加权限");
    },
    /**
     * 提交
     */
    handleOk() {
      this.$refs.DrawerModal.handleCancel();
      this.getDataList();
    },
    close() {
      this.visible = false;
    },
    init(pid, title) {
      this.title = title;
      this.id = pid;
      this.visible = true;
      this.getDataList();
    },
    /**
     * 查询
     */
    getDataList(isResetPage) {
      if (!this.id) {
        return;
      }
      this.tableLoading = true;
      this.$request
        .getRequest1(this.api.listPermissionById, { pid: this.id })
        .then((res) => {
          if (res.success) {
            this.dataSource = res.result;
          }
          this.tableLoading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.bodyStyle {
  padding: 20px;
}
</style>